<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 800px;
        }
        .box{
            border: 2px solid #cccccc;
            display: inline-block;
            min-width: 50px;
            min-height: 50px;
            padding: 40px;
        }
        .mask-box{
            position: fixed;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            background-color: rgba(0, 0, 0, 0.6);
            display: none;
        }
        .model-body{
            display: inline-block;
            min-width: 400px;
            height: 300px;
            background-color: white;
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%,-50%);
            padding: 30px;
            box-sizing: border-box;
        }
    </style>
    <script src="./js/vue.js"></script>
    <script>
        function showTip(e){
            // console.log(e);
            if(e.ctrlKey){
                alert("弹出")
            }
        }
        function preventEvent(e){
            console.log(e);
            e.preventDefault()
        }
    </script>
</head>
<body>
    <input type="button" value="点击事件" onclick="showTip(event)"><br><br>
    <a href="https://www.baidu.com">百度</a>
    <a href="javascript:">百度</a>
    <a>百度</a>
    <a href="https://www.baidu.com" onclick=" return false ">百度</a>
    <a href="https://www.baidu.com" onclick="preventEvent(event)">百度</a>
    <hr>
    <div id="app">
        <!--
        指令完整语法：
            - v-指令名[:参数][.修饰符][……][=取值]
            - v-指令名[:参数][.修饰符][……][="取值"]

        v-on 的修饰符：限制元素绑定的事件的触发条件
        -->
        <input type="button" value="点击事件" @click.ctrl="showTip()">
        <hr>
        <h3>事件修饰符</h3>
        <!-- 
            - .prevent ： 为事件添加阻止默认事件功能（调用js event.event.preventDefault()）
            - .stop ： 为事件添加阻止事件传播(冒泡+捕获)特性（调用js event.stopPropagation()）
            - .self ： 事件只有被绑定的元素才具有权限触发 - 仍然保留事件冒泡(事件穿透)
            - .capture ：改变事件传播方向，将冒泡事件转换为事件捕获
        -->
        <a href="https://www.baidu.com" @click.prevent>百度</a>
        <hr>
        <div class="box" @click="printDomName('div1',$event)" >
            div1
            <div class="box" @click.stop="printDomName('div2',$event)" >
                div2
                <div class="box" @click="printDomName('div3',$event)" >
                    div3
                    <div class="box" @click.self="printDomName('div4',$event)" >
                        div4
                        <div class="box" @click="printDomName('div5',$event)" >div5</div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <h3>冒泡的实际应用</h3>
        <input type="button" value="open model" @click=" isShow=true ">
        <div class="mask-box" 
            @click=" isShow=false "
            v-bind:style=" `display: ${ isShow?'block':'none' };`"
        >
            <div class="model-body" @click.stop>
                <input type="text" name="" id="">
            </div>
        </div>
        <hr>
        <div class="box" @click.capture="printDomName1('div1')" >
            div1
            <div class="box" @click.capture="printDomName1('div2')" >
                div2
                <div class="box" @click.capture="printDomName1('div3')" >
                    div3
                    <div class="box" @click.capture="printDomName1('div4')" >
                        div4
                        <div class="box" @click.capture="printDomName1('div5')" >div5</div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 捕获优先级大于冒泡 -->
        <div class="box" @click.capture="printDomName1('div1')" >
            div1
            <div class="box" @click="printDomName1('div2')" >
                div2
                <div class="box" @click.stop="printDomName1('div3')" >
                    div3
                    <div class="box" @click="printDomName1('div4')" >
                        div4
                        <div class="box" @click.capture.stop="printDomName1('div5')" >div5</div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <!-- 
            .once : 该修饰符被修饰的事件一旦被调用一次后，会直接删除事件绑定 - 一次新事件
        -->
        <input type="button" value="一次性事件" @click.once="showTip()">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            isShow:false
        },
        methods:{
            showTip(){
                alert("vue中的回调")
            },
            printDomName(name,e){
                console.log(name,e.target,e.currentTarget);
                console.log(e.target===e.currentTarget); // 判断当前事件是否由元素本身触发
            },
            printDomName1(name){
                console.log(name);
            },
        }
        
    })
</script>
</html>